

$(function () {


    renderHistory();
    // 1-要取出之前用户的搜索记录，渲染在页面中
    function renderHistory() {

        // 获取localStorage数据字符串
        var searchStr = localStorage.getItem('search');
        var arr = JSON.parse(searchStr) || [];
        console.log(arr);

        //渲染
        $('.lt-searchRecord').html(template('tmp', { list: arr }));
    }







    //2-清空历史记录
    // 点击清空按钮，清空search对应的localStorage的数据  removeItem()
    // 页面重新渲染
    $('.btn_empty').on('click', function () {

        mui.confirm('确定要清空历史吗？', '温馨提示', ['取消', '确定'], function (data) {
            // console.log(data);
            if (data.index == 1) {
                localStorage.removeItem('search');
                // 重新渲染
                renderHistory();
            }
        })
    })




    //3-删除单体记录
    // 1-点击按钮，弹出模态框， 获取当前数据id 
    // 2-取出历史数据json字符串，转成数组， 根据id删除数组中对应的数据
    // 3-把数组转成json字符串，存储到localStorage中
    // 4-页面重新渲染

    // 事件委托
    $('.lt-searchRecord').on('click', 'i', function () {
        var that = this;
        mui.confirm('确定要删除记录吗？', '温馨提示', ['取消', '确定'], function (data) {

            // console.log(data);
            if (data.index == 1) {
                // 获取当前id
                var index = $(that).data('index');
                
                // 取出历史数据json字符串，转成数组， 根据id删除数组中对应的数据
                var arr = JSON.parse(localStorage.getItem('search')) || [];
                // console.log(arr);

                // 根据索引值进行删除
                // splice(从哪删， 删几个， 替换项);
                arr.splice(index, 1);

                // 将数据更新回localStorage
                localStorage.setItem('search', JSON.stringify(arr));

                // 重新渲染
                renderHistory();
            }
        })
    })






    //4-添加历史记录
    // 1-点击按钮，获取搜索框的值
    // 2-将搜索框的值添加到localStorage中
    // 先取出json字符串，转成数组，向数组中添加，添加完成后，在转成json，存储到localStorage
    // 3-重新渲染


    $('.search_btn').on('click', function () {
        // 获取输入框值
        var val = $('.search-txt').val();
        if (val.trim().length == 0) {
            mui.toast('数据不能为空！');
            return;
        }
        // console.log(val);

        // 添加数据
        // 获取数据为null时  赋值[];
        var arr = JSON.parse(localStorage.getItem('search')) || [];


        //在添加之前先判断数组中是否有重复向，如果有先删除，在添加
        var index = arr.indexOf(val);
        console.log(index);
        
        if(index != -1) {
            //删除重复项
            arr.splice(index, 1);
        }

        // 在数组最前面添加数据
        arr.unshift(val);

        // 数组的长度大于8 ，删除最后一条
        if(arr.length > 8) {
            arr.pop();
        }

        // 重新存储到localStorage中
        localStorage.setItem('search', JSON.stringify(arr));

        // 重新渲染
        renderHistory();

        // 清空输入框
        $('.search-txt').val('');

        //跳转到搜索列表页，查看搜索结果
        location.href = 'searchList.html?key=' + val;


    })


})